<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>redis指数</title>
</head>


<body>
<label for="key">请输入:
    <input type="text" name="key" id="key" placeholder="请输入redis">
    <input type="button" id="btn" onClick="sendMessage1()" value="确认">
</label>

<div class="col-lg-6">
    <div class="card">
        <div id="m2" style="width: 550px;height:400px;"></div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script>

    var dom = document.querySelector("#m2");
    var myChart = echarts.init(dom);
    var option;

    function sendMessage1() {
        var key = $('#key').val();
        console.log(key)
        $.ajax({
            url: "/search",
            type: "get",
            data: {"key": key},
            success: function (data) {
                console.log(data)
                console.log(data.counts)
                option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: key
                    },
                    xAxis: {
                        type: 'category',
                        data: data.times
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: key,
                            data: data.counts,
                            type: 'line',
                            smooth: true
                        },
                    ]
                };
                myChart.setOption(option);
            }
        })

    }


</script>
</body>
</html>